<template>
	<view v-if="value" class="daily_health_alert">
		<view class="d_h_main">
			<h2>每日健康奖励</h2>
			<!-- <image class="vigor_img" src="@/static/ring/vigor/giftBox.png" mode="widthFix" /> -->
			<view class="chart">
				<l-echart ref="chartRef"></l-echart>
			</view>

			<view class="source"> 文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案 </view>

			<view class="button" @click="sure">确定</view>
		</view>
	</view>
</template>
<script>
import * as echarts from "echarts";

export default {
	props: {
		value: Boolean,
		info: Object,
	},
	data() {
		return {
			chartRef: null,
			chart: null,
		};
	},
	computed: {
		vigorSource() {
			return this.info?.vigorSource || "您完成xx/xx日的健康睡眠任务";
		},
		vigorValue() {
			return this.info?.vigorValue || 0;
		},
		healthPieValue() {
			return [
				{ value: 1048, name: "睡眠" },
				{ value: 735, name: "佩戴" },
				{ value: 580, name: "早睡" },
			];
		},
		option() {
			return {
				series: [
					{
						name: "Access From",
						type: "pie",
						data: [
							{
								value: 335,
								name: "佩戴",
								labelLine: {
									length: 5,
									length2: 10,
								},
							},
							{
								value: 274,
								name: "早睡",
								labelLine: {
									length: 10,
									length2: 30,
								},
							},
							{
								value: 310,
								name: "睡眠",
								labelLine: {
									length: 5,
									length2: 10,
								},
							},
						],
						label: {
							color: function (params) {
								const colors = ["#7B77F0", "#646AFF", "#4A9FFF"]; // 自定义颜色数组
								return colors[params.dataIndex]; // 根据数据项的索引返回对应的颜色
							},
							formatter: ({ name, percent, dataIndex }) =>
								`{${dataIndex === 0 ? "a" : dataIndex === 2 ? "b" : "c"}|} ${name}\n${Math.round(percent)}%`,
							// formatter: ["{a|}{b}", "{d}%"].join("\n"),

							rich: {
								a: {
									backgroundColor: {
										image: "http://qiniu.relaverse.cn/icon/ware.png",
									},
									height: 15,
									width: 15,
								},
								b: {
									backgroundColor: {
										image: "http://qiniu.relaverse.cn/icon/sleep.png",
									},
									height: 15,
									width: 15,
								},
								c: {
									backgroundColor: {
										image: "http://qiniu.relaverse.cn/icon/sleep_e.png",
									},
									height: 15,
									width: 15,
								},
							},
							fontWeight: "bolder",
							lineHeight: 16,
							fontSize: 12,
						},
						labelLine: {
							smooth: 0.1,
							length: 15,
							length2: 5,

							lineStyle: {
								cap: "round",
							},
						},
						itemStyle: {
							color: function (params) {
								const colors = ["#7B77F0", "#646AFF", "#4A9FFF"]; // 自定义颜色数组
								return colors[params.dataIndex]; // 根据数据项的索引返回对应的颜色
							},
							shadowBlur: 20,
							shadowColor: "rgba(0, 0, 0, 0.5)",
						},
					},
				],
			};
		},
	},

	watch: {
		value() {
			this.$nextTick(async () => {
				if (this.value) {
					if (this.$refs.chartRef && this.$refs.chartRef.init) {
						this.chartRef = this.$refs.chartRef;
						this.chart = await this.chartRef.init(echarts);
					}

					this.chart.setOption(this.option);
				}
			});
		},
	},

	methods: {
		sure() {
			console.log("sure");
			this.$emit("input", false);
		},
	},
};
</script>
<style lang="scss" scoped>
.daily_health_alert {
	width: 100vw;
	height: 100vh;
	background-color: rgba($color: #000000, $alpha: 0.8);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;

	display: flex;
	justify-content: center;
	align-items: center;

	text-align: center;

	.d_h_main {
		width: 80%;
		height: 978rpx;
		border-radius: 30rpx;
		background: linear-gradient(180deg, #dde6ff 0%, #ffffff 51.46%);
		padding: 60rpx 0;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		position: relative;

		.chart {
			width: 100%;
			height: 440rpx;
		}

		.source {
			font-weight: 400;
			font-size: 34rpx;
			text-align: center;
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.button {
			background: #2359f8;
			color: white;
			width: calc(90% - 40rpx);
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
		}
	}
}
</style>
